<template>
  <transition name="comment">
    <div>
     <others-msg :comment="comment" :postAddress="postAddress" :saveCollection="saveCollection" changeComment="changeCommen"></others-msg>
    </div>
  </transition>
</template>

<script>
import OthersMsg from 'base/othersMsg/othersMsg'
export default {
  name: 'messageBoard',
  data() {
  	return {
  		comment: [],
  		postAddress:'saveMessageBoard',
  		saveCollection:'messageBoard'
  	}
  },
  methods: {
      changeCommen(data) {
        // console.log(data)
        this.comment.unshift(data);
    }
  },
  created() {
  	this.$axios.get('/api/getMessageBoard').then((res) => {
  	this.comment = res.data.reverse();
      // console.log(this.comment)
  	})
  },
  watch: {
    comment(newVavule) {
        this.comment  = newVavule;
    }
  },
  components: {
  	OthersMsg
  }
  
}
</script>

<style scoped lang="less">
  .comment-enter-active, .comment-leave-active {
        transition: all .5s;
  }
  .comment-enter, .comment-leave-to {
        transform: translate3d(-200%,0,0);
  }

</style>
